<template>
  <div class="swiperTabs">
    <swiper ref="mySwiper" :options="swiperOptions" class="swiper-item">
      <swiper-slide v-for="(item,index) in listdata" :key="index">{{item.title}}</swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      swiperOptions: {
        slidesPerView: "auto",
      },
      listdata: [
        { title: "全球经典" },
        { title: "户外" },
        { title: "摄影" },
        { title: "亲子" },
        { title: "海岛" },
        { title: "自驾" },
        { title: "越野车" },
        { title: "同城" },
        { title: "房车" },
        { title: "骑行" },
        { title: "赛事" },
        { title: "游轮" }
      ]
    };
  },
  methods: {},
  mounted() {}
};
</script>
<style lang="less" scoped>
.swiperTabs {
  width: 100%;
  .swiper-slide {
    width: auto;
    font-size: 15/37.5rem;
    margin: 10/37.5rem 30/37.5rem 10/37.5rem 0;
    &:nth-child(1) {
      margin-left: 10/37.5rem;
    }
  }
}
</style>